<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background,}">
		<uni-nav-bar title="详情" @clickLeft="back" left-icon="left" />
		<view class="detail" :style="{'height': 'calc(100vh - 40rpx - 94px - var(--status-bar-height))'}">
			<view class="top">
				<view class="cover">
					<image style="z-index: 2;border-radius: 10rpx;" :src="info.image"></image>
					<image class="load" src="../../static/cover.jpeg"></image>
				</view>
				<view class="right">
					<view class="name">
						{{info.name}}
					</view>
					<view class="author" @click="jumpSearch(info.author)">
						{{info.author}}
					</view>
					<view class="type">
						{{info.type}}
					</view>
					<view class="source" @click="$refs.source.open()">
						<block v-for="(item,index) in sources" :key="index">
							<text v-if="item.value==storage.currentSource">{{item.text}}</text>
						</block>
						<view style="font-size: 40rpx;transform: rotateZ(90deg);" class="icon-gengduo iconfont">

						</view>
					</view>
				</view>
			</view>
			<view class="describe" v-if="info.description">
				{{info.description}}
			</view>
		</view>


		<uni-popup ref="source" type="dialog">
			<uni-popup-dialog title="换源" mode="base" message="成功消息" :duration="2000" :before-close="true"
				@close="$refs.source.close()" @confirm="changeSource()">
				<view style="height: 50vh;overflow-y: scroll;width: 100%;">
					<uni-data-checkbox mode="list" v-model="sourcesId" :localdata="sources">
					</uni-data-checkbox>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		<view class="nav">
			<view class="left" @click="buttonClick(0)">
				{{storage.status==1?'移除书架':'加入书架'}}
			</view>
			<view class="right" @click="buttonClick(1)">
				开始阅读
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import request2 from '../../utils/request2.js'
	export default {
		data() {
			return {
				sources: [],
				sourcesId: null,
				info: {
					sources: []
				},
				storage: null,
			};
		},
		onLoad(e) {
			let storage = uni.getStorageSync('info')
			if (storage) {
				this.info = storage
				this.storage = uni.getStorageSync("novel_" + this.info.name + '_' + this.info.author)
				if (this.storage) {
					this.info = this.storage.info
					let save = uni.getStorageSync("novel_" + this.info.name + '_' + this.info.author)
					let save_list = save.info.sources.map(i => i.id)
					let storage_list = storage.sources.map(i => i.id)
					let t = 0
					for (let s of storage_list) {
						if (save_list.indexOf(s) == -1) {
							save.info.sources.push(storage.sources[t])
							save_list = save.info.sources.map(i => i.id)
						} else {
							let index = save_list.indexOf(s)
							save.info.sources[index] = storage.sources[t]
						}
						t++
					}

					uni.setStorageSync("novel_" + this.info.name + '_' + this.info.author, save)
					this.info = save.info
				}
				this.getList()
			}
		},
		onShow() {
			this.getSources()
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},
		methods: {
			getSources() {
				this.storage = uni.getStorageSync("novel_" + this.info.name + '_' + this.info.author)
				if (this.storage) {
					this.sourcesId = this.storage.currentSource
					this.sources = this.storage.info.sources.map(i => {
						return {
							text: i.name + (i.lastest_chapter ? (" 最新:" + i.lastest_chapter) : ''),
							value: i.id
						}
					})
				} else {
					this.sourcesId = this.info.sources[0].id
					this.sources = this.info.sources.map(i => {
						return {
							text: i.name + (i.lastest_chapter ? (" 最新:" + i.lastest_chapter) : ''),
							value: i.id
						}
					})
				}
			},
			getList() {
				let pageList = getCurrentPages()
				if (pageList[pageList.length - 2] && pageList[pageList.length - 2].route == 'pages/index/index') {
					return
				}
				uni.showLoading({
					title: "获取信息中",
					mask: true
				})
				let that = this
				let sources = this.info.sources
				let tasks = sources.map((i, j) => {
					return {
						func: this.fetch,
						index: j
					}
				})
				Promise.all(Array.from({
					length: 8
				}).map((i, j) => {
					return new Promise(resolve => {
						function run() {
							if (tasks.length <= 0) {
								resolve()
								return
							}
							let task = tasks.shift()
							task.func(task.index).then(res => {
								run()
							})
						}
						run()
					})
				})).then(res => {
					this.$set(this.info, 'image', this.info.sources[0].image)
					this.$set(this.info, 'description', this.info.sources[0].description)
					this.$set(this.info, 'type', this.info.sources[0].type)
					this.$set(this.info, 'lastest_chapter', this.info.sources[0].lastest_chapter)
					let o = {
						'currentchapters': this.storage.currentchapters ? this.storage
							.currentchapters : 0,
						'current': this.storage.current ? this.storage.current : 0,
						'info': this.info,
						'time': new Date().getTime(),
						'chapters': this.storage.chapters ? this.storage.chapters : [],
						'currentSource': this.info.sources[0].id,
						'status': this.storage ? this.storage.status : 0
					}
					uni.hideLoading()
					uni.setStorage({
						key: "novel_" + this.info.name + '_' + this.info.author,
						data: o,
						success() {
							that.info = o.info
							that.storage = o
							that.getSources()
						}
					})
				})
			},

			changeSource() {
				this.$refs.source.close()
				this.storage.currentSource = this.sourcesId
				this.storage.chapters = []

				let time = new Date().getTime()
				let novelList = this.$store.state.data.novelList
				let o = JSON.parse(JSON.stringify(this.storage.info))
				let key = "novel_" + o.name + '_' + o.author
				let names = novelList.map(i => {
					return "novel_" + i.name + '_' + i.author
				})
				let index = names.indexOf(key)
				if (index > -1) {
					novelList[index].total = this.storage.chapters.length
					if (novelList[index].total != 0) novelList[index].lastestchapter = this.storage.chapters[this.storage
						.chapters.length - 1].name
				}

				this.$store.commit('data/SET_NOVELLIST', novelList)
				uni.setStorageSync("novel_" + this.info.name + '_' + this.info.author, this.storage)
				uni.showToast({
					title: '切换成功',
					icon: 'none'
				})
			},
			jumpSearch(name) {
				let pageList = getCurrentPages()
				if (pageList[pageList.length - 2] && pageList[pageList.length - 2].route == 'pages/results/results') {
					pageList[pageList.length - 2].$vm.keyword = name
					pageList[pageList.length - 2].$vm.asyncSearch()
					uni.navigateBack()
					return
				}
				uni.navigateTo({
					url: "../results/results?keyword=" + name,
				})
			},
			back() {
				uni.navigateBack()
			},
			buttonClick(e) {
				if (e == 0) {
					let status = 0
					if (this.storage) {
						status = uni.getStorageSync("novel_" + this.info.name + '_' + this.info.author).status
					}
					if (status == 1)
						status = 0
					else
						status = 1
					let time = new Date().getTime()
					let novelList = this.$store.state.data.novelList
					let o = JSON.parse(JSON.stringify(this.info))
					let key = "novel_" + o.name + '_' + o.author
					let names = novelList.map(i => {
						return "novel_" + i.name + '_' + i.author
					})
					let index = names.indexOf(key)

					if (index == -1) {
						o.time = time
						o.currentchapters = this.storage.currentchapters + 1
						o.total = this.storage.chapters?this.storage.chapters.length:0
						o.status = status
						if (o.total != 0) o.lastestchapter =  this.storage.chapters?this.storage.chapters[this.storage.chapters.length - 1].name:null
						novelList.push(o)
					} else {
						novelList[index].status = status
					}
					this.$store.commit('data/SET_NOVELLIST', novelList)
					this.storage.status = status
					if (status == 0) {
						uni.showToast({
							icon: 'none',
							title: "移出书架成功"
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: "加入书架成功"
						})
					}
					uni.setStorage({
						key: "novel_" + this.info.name + '_' + this.info.author,
						data: {
							'currentchapters': this.storage.currentchapters ? this.storage.currentchapters : 0,
							'current': this.storage.current ? this.storage.current : 0,
							'info': this.info,
							'time': time,
							'chapters': this.storage.chapters ? this.storage.chapters : [],
							'currentSource': this.info.sources[0].id,
							'status': status
						}
					})
				} else {
					let pageList = getCurrentPages()
					if (pageList[pageList.length - 2] && pageList[pageList.length - 2].route == 'pages/index/index') {
						uni.navigateBack()
						return
					}
					let info = JSON.parse(JSON.stringify(this.info))
					delete info.is_load
					uni.setStorageSync('info', info)
					uni.navigateTo({
						url: "../index/index"
					})

				}
			},

			fetch(index) {
				return new Promise(resolve => {
					let that = this
					let description_zz = this.info.sources[index].description_zz
					let image_zz = this.info.sources[index].image_zz
					let type_zz = this.info.sources[index].type_zz
					let lastest_chapter_zz = this.info.sources[index].lastest_chapter_zz
					request2(this.info.sources[index].url).then(res => {
						let r = new RegExp(description_zz, 'gs')
						this.$set(this.info.sources[index], 'description', r.exec(res)[1])

						r = new RegExp(image_zz, 'gs')
						this.$set(this.info.sources[index], 'image', r.exec(res)[1])

						r = new RegExp(type_zz, 'gs')
						this.$set(this.info.sources[index], 'type', r.exec(res)[1])

						r = new RegExp(lastest_chapter_zz, 'gs')
						this.$set(this.info.sources[index], 'lastest_chapter', r.exec(res)[1])

						resolve()
					}).catch(res => {
						resolve()
						console.log(res);
					})
				})
			}

		}
	}
</script>

<style lang="less">
	.container.dark {
		/deep/.uni-nav-bar-text {
			color: white !important;
		}

		/deep/.uni-icons {
			color: white !important;
		}
	}

	.container {
		background: var(--background);

		/deep/ .checklist-text {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-size: 24rpx;
		}

		/deep/.uni-navbar__header {
			background-color: var(--background) !important;
			border: none;
		}

		/deep/.uni-navbar__content {
			border: none;
		}

		.nav {
			position: absolute;
			bottom: 0px;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;

			.left {
				width: 40vw;
				border-bottom-left-radius: 99px;
				border-top-left-radius: 99px;
				text-align: center;
				height: 40px;
				line-height: 40px;
				margin-bottom: 10px;
				background-color: var(--background);
				box-shadow: 0rpx 10rpx 15rpx var(--color1), 0rpx -10rpx 15rpx var(--color2);
			}

			.right {
				height: 40px;
				line-height: 40px;
				margin-bottom: 10px;
				width: 40vw;
				text-align: center;
				border-bottom-right-radius: 99px;
				border-top-right-radius: 99px;
				background-color: var(--background);
				box-shadow: 0rpx 10rpx 15rpx var(--color1), 0rpx -10rpx 15rpx var(--color2);
			}
		}

		.detail {
			padding: 0 20rpx;
			padding-top: 40rpx;
			padding-bottom: 100rpx;
			overflow: scroll;

			.describe {
				color: var(--color-second);
				margin: 15rpx;
				font-size: 28rpx;
				margin-top: 40rpx;
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: var(--background) !important;
				box-shadow: 10rpx 10rpx 15rpx var(--color1),
					-10rpx -10rpx 15rpx var(--color2);
			}

			.top {
				padding-top: 20rpx;
				display: flex;
				font-size: 30rpx;

				.right {
					margin-left: 15px;
					display: flex;
					flex: 1;
					border-radius: 20rpx;
					flex-direction: column;
					justify-content: center;
					background-color: var(--background) !important;
					box-shadow: 10rpx 10rpx 15rpx var(--color1),
						-10rpx -10rpx 15rpx var(--color2);

					.name {
						width: 400rpx;
						margin-bottom: 10px;
						padding: 6rpx 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.author {
						width: 400rpx;
						color: #35a9fc;
						margin-bottom: 10px;
						padding: 6rpx 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}


					.type {
						width: 400rpx;
						margin-bottom: 10px;
						padding: 6rpx 30rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.source {
						width: 400rpx;
						color: #35a9fc;
						display: flex;
						align-items: center;
						padding: 6rpx 30rpx;
						display: flex;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						justify-content: space-between;
					}
				}

				.cover {
					position: relative;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: var(--background) !important;
					box-shadow: 10rpx 10rpx 15rpx var(--color1),
						-10rpx -10rpx 15rpx var(--color2);

					uni-image {
						height: 240rpx;
						width: 180rpx;
					}

					.load {
						z-index: 1;
						position: absolute;
						left: 20rpx;
						border-radius: 10rpx;
					}
				}
			}

		}
	}
</style>
